<script setup>
import MyBox from './components/Mybox.vue';

</script>
<template>
  <div class="all">
      <h1>样式设置</h1>

      <div class="box1">我是box1</div>
      <MyBox></MyBox>
  </div>
    
    
</template>

<!-- 
    可以直接通过style标签直接编写样式
      如果直接通过style编写样式标签，此时编写的样式是全局样式
      会影响到所有的组件
 -->


<!-- <style>
    h1{
      background-color: #bfa;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
    }
</style> -->

<!-- 
    可以为style标签添加一个scoped样式
      vue会自动为组件中的所有元素生成一个随机属性
        形如 [data-v-7a7a37b1]
        生成后，所有的选择器都会在最后一个添加[data-v-7a7a37b1]
        h1 -> h1[data-v-7a7a37b1]

    -注意：
      - 随机生成的属性，除了会添加到当前组件内的所有元素上，
        也会添加到当前组件引入的其他组件的根元素上
        是为了，可以通过父元素来为子组件设置一些样式
 -->
<style scoped>
    .box1{
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
    }

    h1{
      background-color: red;
    }

    /* 
      将组件中所有的 h1的字体颜色设置为黄色
      .all :deep(h1)
    */
    .all :deep(h1){
        color: yellow;
    }
    
    /* 全局样式设置 */
    :global(div){
      border: 1px red solid ;
    }
</style>

<!-- 全局样式 -->
<!-- <style>
  div{
    border: 1px red solid ;
  }
</style> -->